<template>
  <div id="shopcart">
    <nav-bar class="nav-bar">
      <div slot="center">购物车 ({{ cartLength }})</div>
    </nav-bar>
    <scroll class="wrapper">
      <shopcart-list />
    </scroll>
    <shopcart-tool />
  </div>
</template>

<script>
import NavBar from "components/commom/navbar/NavBar";
import Scroll from "components/commom/scroll/Scroll";
import ShopcartList from "./ShopcartList";
import ShopcartTool from "./ShopcartTool";

export default {
  name: "Shopcart",
  components: {
    NavBar,
    ShopcartList,
    Scroll,
    ShopcartTool,
  },
  computed: {
    cartLength() {
      return this.$store.state.cartList.length;
    },
  },
};
</script>

<style scoped  lang="less" >
.wrapper {
  height: calc(100vh - 44px - 60px - 38px);
  overflow: hidden;
}
</style>